<template>
  <!--immediate-check	是否在初始化时立即执行滚动位置检查-->
  <div>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我是有底线的~"
        @load="onLoad"
        :immediate-check="false"
    >
      <van-cell v-for="item of datalist" :key="item.filmId" @click="handleChangePage(item.filmId)">
        <img :src="item.poster">
        <p>{{ item.name }}</p>
        <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;color: gray">主演： {{item.actors | actorFilter}}</p>
        <p style="font-size: 14px;color: gray">{{item.nation}} | {{item.runtime}}分钟</p>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import Vue from "vue"
import {List,Cell} from "vant"
import http from "../../util/http";
import {mapState} from "vuex";


Vue.use(List).use(Cell) //全局注册

Vue.filter("actorFilter", (actors) => {
  if (actors === undefined) return "暂无主演"
  return actors.map((item) => item.name).join(" ")
})
export default {
  data() {
    return {
      datalist: [],
      swiper: [],
      loading: false, //是否正在加载中，防止多次触发
      finished: false, //是否已经结束
      current: 1, //记录第几页
      total: 0, //数据总数
    };
  },
  mounted() {
    http({
      url: `/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=1&k=9354368`,
      headers: {
        "X-Host": "mall.film-ticket.film.list",
      },
    }).then((res) => {
      //console.log(res.data.data.films)
      this.datalist = res.data.data.films
      this.total = res.data.data.total
      //console.log("总数："+res.data.data.total)
      this.swiper = [this.datalist[0].poster,this.datalist[1].poster,this.datalist[2].poster]
      this.bus.$emit('myswiper',this.swiper)
    })
  },
  computed: {
    ...mapState('cityModule',['cityId'])
  },
  methods: {
    handleChangePage(id) {
      //console.log(id);
      // 编程式导航
      // 通过路径跳转
      this.$router.push(`/detail/${id}`)
      // 里面是一个对象 前一个id是动态路由绑定的id 后者是传过来的id
      // this.$router.push({name:'Detail',params:{id:id}})
      // query跳转
      //this.$router.push(`/detail/${id.filmId}`);
    },
    onLoad() {
      console.log("到底了")
      //console.log(this.total)
      // 判断所有的数据是不是已经请求完成
      //console.log("当前已经列表总数："+this.datalist.length)
      //console.log("total:"+this.total)
      if (this.datalist.length === this.total && this.datalist.length !== 0) {
        this.finished = true //所有的数据都已加载完成，不再继续请求数据
        return
      }
      //1、Ajax请求新页面的数据
      //2、合并新数据到页面
      //3、this.loading=false
      this.current++
      http({
        url: `/gateway?cityId=${this.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=9354368`,
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
      }).then((res) => {
        //console.log(res.data.data.films)
        //将新数据合并到老数据
        this.datalist = [...this.datalist, ...res.data.data.films]
        // 数据更新完毕后，将 loading 设置成 false,
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
    .van-list {
      .van-cell {
        overflow: hidden;
        flex: 1; //让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：
        padding: 10px;
        img{
          float: left;
          width: 72px;
          height: 100px;
          margin-right: 10px;
          border-radius: 3px;
        }
    }

    }
</style>>
